<template>
	
	<view class="courses">
	 
	  <!-- 搜索 -->
	 	<view class="cu-bar search bg-gradual-red">
		<view class="search-form round">
			<text class="cuIcon-search"></text>
			<input v-model="search" placeholder="search" />
		</view>
		<view class="action">
			<text style="font-size: 150%;" class="cuIcon-scan"></text>
		</view>
	</view>
	<!-- 搜索 -->
	  <view class="title_wrap">
	    <view class="title_in">
	      <uni-segmented-control
	        :current="current"
	        :values="items.map(v=>v.title)"
	        @clickItem="handleClick"
	        style-type="text"
	        active-color="#feb2b2"
	      ></uni-segmented-control>
	    </view>
	  </view>
	<!-- 课程页面开始 -->
	  <view class="courses_concent">
	    <view v-if="current === 0">
	    <recommend-course></recommend-course>
	    </view>
	    <view v-if="current === 1">
	      <new-course></new-course>
	    </view>
		<view v-if="current === 2">
		  <mine-course></mine-course>
		</view>
		<view v-if="current === 3">
		  <category-course></category-course>
		</view>
	  </view>
	</view>
</template>
<!-- 课程页面结束 -->
<script>
import newCourse from "./new-course";
import recommendCourse from "./recommend-course";
import mineCourse from "./mine-course"
import categoryCourse from "./category-course"
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import { uniIcons } from "@dcloudio/uni-ui";
export default{
	components:{
		recommendCourse,
		mineCourse,
		newCourse,
		uniSegmentedControl,
		uniIcons,
		categoryCourse
	},
	methods: {
	    handletest() {
	      console.log(current);
	    },
	    handleClick(e) {
	      if (this.current != e.currentIndex) {
	        this.current = e.currentIndex;
	      }
	    }
	  },
	  data() {
	    return {
	      current: 2,
	      items: [{ title: "推荐" }, { title: "最新" }, { title: "我的" },{ title: "分类" }],
	    };
	  }
	};
</script>

<style lang="scss" scoped>
.search_btn {
  padding: 10rpx;
}

.title_wrap {
  .left_btn {
  }
  .right_btn {
  }
  .title_in {
    margin: 0 auto;
    width: 60%;
  }
}
.courses-concent{
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
	
}
</style>